<template>
  <a-card>
    <a-upload
      v-permission="`system:cloudFile:upload`"
      v-decorator="['fileList', { rules: [{ required: true, message: '请先上传文件' }] }]"
      name="file"
      :action="upload.action"
      :headers="upload.headers"
      :multiple="false"
      :show-upload-list="false"
      @change="handleFileChange"
    >
      <a-button style="margin-bottom: 20px"><a-icon type="upload" /> 上传文件 </a-button>
    </a-upload>
    <a-table
      bordered
      :loading="loading"
      :pagination="false"
      :columns="columns"
      :row-key="item => item.id"
      :data-source="dataSource"
      :indentSize="10"
    >
    </a-table>
  </a-card>
</template>

<script>
import { systemService } from '@/services';
import { BASE } from '@/services/api';

const columns = [
  {
    title: 'ID',
    dataIndex: 'id',
    key: 'id',
    align: 'center',
    width: 150,
  },
  {
    title: '业务模块',
    dataIndex: 'modelNameDesc',
    key: 'modelNameDesc',
    align: 'center',
    width: 200,
  },
  {
    title: '文件名',
    key: 'fileName',
    dataIndex: 'fileName',
    align: 'center',
    width: 200,
    ellipsis: true
  },
  {
    title: '文件地址',
    key: 'filePath',
    dataIndex: 'filePath',
    align: 'center',
  },
  {
    title: '类型',
    key: 'fileType',
    dataIndex: 'fileType',
    align: 'center',
    width: 150,
  },
  // {
  //   title: "操作",
  //   key: "action",
  //   scopedSlots: { customRender: "action" },
  //   align: "center",
  //   width: 150,
  // },
];

const formItemLayout = {
  labelCol: { span: 6 },
  wrapperCol: { span: 16 },
};

export default {
  name: 'systemFile',

  data() {
    return {
      columns,
      dataSource: [],
      loading: false,
      visible: false,
      type: 1, // 1-新增 2-修改
      formItemLayout,
      form: this.$form.createForm(this, { name: 'menu-form' }),
      confirmLoading: false,
      selectedItem: null,
      pagination: {
        current: 1,
        pageSize: 10,
        total: 0,
      },
      upload: {
        action: `${BASE}/lookFile/uploadSysFile`,
        headers: {
          token: localStorage.getItem('token'),
        },
      },
    };
  },

  computed: {
    modalTitle() {
      return this.type === 1 ? '新增' : '修改';
    },

    formType() {
      const type = this.form.getFieldValue('type');
      return type;
    },

    formNameLabel() {
      const labelMap = ['目录名称', '菜单名称', '按钮名称'];
      return labelMap[this.formType];
    },
  },

  created() {
    this.getDataSource(this.pagination);
  },

  methods: {
    // 获取数据
    getDataSource({ current, pageSize }) {
      this.loading = true;
      systemService.getFileList({ current, pageSize }).then(res => {
        if (res.code === '200') {
          this.dataSource = res.data.content;
          this.pagination.total = res.data.totalElements;
          this.pagination.current = current;
          this.pagination.pageSize = pageSize;
          this.loading = false;
        } else {
          this.$message.error(res.msg);
        }
      });
    },

    // 删除
    handleDelRole(item) {
      console.log(item);
      const that = this;
      this.$confirm({
        title: '确认删除该菜单吗？',
        content: () => <div style='color:red;'>删除后不可恢复！</div>,
        okText: '删除',
        okType: 'danger',
        cancelText: '取消',
        onOk() {
          const { id } = item;
          console.log(id);
          systemService.delMenu({ id }).then(res => {
            console.log(res);
            if (res.code === '200') {
              that.$message.success('删除成功');
              that.getDataSource(that.pagination);
            }
          });
        },
        onCancel() {
          console.log('Cancel');
        },
      });
    },

    // 文件上传列表
    handleFileChange({ file, fileList, event }) {
      console.log({ file, fileList, event });
      if (file.status === 'done' && file.response.code === '200') {
        // this.fileIdList.push(file.response.data)
        // this.fileList.push(file);
        this.pagination.current = 1;
        this.pagination.pageSize = 20;
        this.getDataSource(this.pagination);
        this.$message.success('上传成功');
      }
      if (file.status === 'error') {
        this.$message.fail('上传失败,请检查文件是否大于20M');
      }
      // this.fileList = fileList
    },
  },
};
</script>

<style lang="less" scoped>
.page-layout {
  padding-bottom: 24px;
}
.operator {
  margin-bottom: 24px;
}
</style>
